<template>
  <div class="app-container" v-loading="loading">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/agents/index' }">智能体</el-breadcrumb-item>
      <el-breadcrumb-item>管理设备</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="card">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd"
            >添加设备</el-button
          >
        </el-form-item>
      </el-form>
      <div v-if="detailList.length > 0">
        <el-row :gutter="20">
          <el-col
            :xl="6"
            :lg="8"
            :sm="12"
            :xs="24"
            v-for="(item, index) of detailList"
            :key="index"
          >
            <detail-item :item="item" @getList="getRoles" />
          </el-col>
        </el-row>
      </div>
      <el-empty :image-size="200" v-else />
    </el-card>
    <add-dialog :open="open" @cancel="cancel" :role-id="roleId" @getList="getRoles" />
    <!--  底部  -->
    <detault-footer />
  </div>
</template>

<script>
import { deviceList } from "@/api/login";
import addDialog from "./components/add-dialog";
import detailItem from "./components/detail-item";
export default {
  data() {
    return {
      loading: false,
      roleId: null,
      detailList: [],
      form: {},
      open: false,
      queryParams: {},
    };
  },
  components: {
    addDialog,
    detailItem,
  },
  created() {
    this.roleId = this.$route.query.roleId;
    this.getRoles();
  },
  methods: {
    async getRoles() {
      try {
        this.loading = true;
        const { roleId } = this;
        const { data } = await deviceList(roleId);
        this.detailList = data || [];
      } catch (error) {
        console.error("获取接口错误", error);
      } finally {
        this.loading = false;
      }
    },
    handleAdd() {
      this.open = true;
    },
    cancel() {
      this.open = false;
    },
    getList() {},
  },
};
</script>

<style scoped lang="scss">
.card {
  margin: 22px auto;
  min-height: calc(100vh - 236px);
}
</style>
